<template>
  <div>
    <el-page-header @back="goBack" style="margin-top: 20px"></el-page-header>
    <div style="margin-top: 30px">
      <div style="display: inline-block">
        <el-image
          style="width: 200px; height: 200px"
          :src="imageBaseUrl + foodInfo.icon + '.jpg'"></el-image>
      </div>
      <div style="display: inline-block; margin-left: 15px">
        <div style="font-size: 30px; margin-bottom: 10px">{{foodInfo.fname}}</div>
        <div style="font-size: 20px; margin-bottom: 10px">{{foodInfo.detail}}</div>
        <div style="margin-bottom: 30px">
          <el-rate
            v-model="foodInfo.comment"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
      </div>
      <div>
        <el-card>
          <el-form label-width="80px" :model="commentForm">
            <el-form-item>
              <span>评分</span>
              <el-rate v-model="commentForm.comment" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>麻辣</span>
              <el-rate v-model="commentForm.mspicy" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>辣度</span>
              <el-rate v-model="commentForm.spicy" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>鲜度</span>
              <el-rate v-model="commentForm.fresh" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>苦度</span>
              <el-rate v-model="commentForm.bitter" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>咸度</span>
              <el-rate v-model="commentForm.salt" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>酸度</span>
              <el-rate v-model="commentForm.sour" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <span>甜度</span>
              <el-rate v-model="commentForm.sweet" text-color="#ff9900" class="my-rate" allow-half></el-rate>
            </el-form-item>
            <el-form-item>
              <el-input type="textarea" v-model="commentForm.detail"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addComment">提交评论</el-button>
            </el-form-item>
          </el-form>
          <div v-for="item in foodInfo.remarks" :key="item.reid">
            <el-card style="margin-bottom: 10px">
              <el-form>
                <el-form-item>{{item.user.uname}}</el-form-item>
                <el-form-item>
                  <el-rate v-model="item.comment" text-color="#ff9900" disabled></el-rate>
                </el-form-item>
                <el-form-item>
                  <el-input type="textarea" :value="item.detail"></el-input>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Food',
  data () {
    return {
      fid: this.$route.params.fid,
      foodInfo: {},
      imageBaseUrl: this.$axios.defaults.baseURL + 'static/image/',
      commentForm: {
        fid: this.$route.params.fid,
        uid: window.sessionStorage.getItem('uid'),
        comment: 0,
        mspicy: 0,
        spicy: 0,
        fresh: 0,
        bitter: 0,
        salt: 0,
        sour: 0,
        sweet: 0,
        detail: '',
        time: ''
      }
    }
  },
  created () {
    this.getFood()
  },
  methods: {
    async addComment () {
      this.commentForm.time = this.$options.filters.dateFormat(new Date().getTime())
      const { data: res } = await this.$axios.post('/user/remark/add', this.commentForm)
      if (res.status !== 2000) {
        return this.$message.error('评论失败')
      }
      this.commentForm.comment = 0
      this.commentForm.mspicy = 0
      this.commentForm.spicy = 0
      this.commentForm.fresh = 0
      this.commentForm.bitter = 0
      this.commentForm.salt = 0
      this.commentForm.sour = 0
      this.commentForm.sweet = 0
      this.commentForm.detail = ''
      this.$message.success('评价成功')
      await this.getFood()
    },
    goBack () {
      this.$router.go(-1)
    },
    async getFood () {
      const fid = { fid: this.fid }
      const { data: res } = await this.$axios.get('/user/food/queryByID', { params: fid })
      if (res.status !== 2000) {
        return this.$message.error('获取信息失败')
      }
      this.foodInfo = res.data.food
      await window.sessionStorage.setItem('rid', this.foodInfo.restaurant.rid)
    }
  }
}
</script>

<style scoped>
.my-rate {
  margin: 10px 10px;
  display: inline-block;
}
</style>
